<template>
  <div class="limit">
    <el-row>
      <el-col :span="24">
        <lineChart
          v-if="dataArr.length !== 0"
          :lineData="dataArr"
          :height="height"
          :xaxisData="xData"
        />
      </el-col>
    </el-row>
  </div>
</template>

<script>
import lineChart from "@/views/home/limit/components/lineChart.vue";
export default {
  name: "comLimit",
  components: {
    lineChart,
  },
  props: {
    comLimitdata: {
      type: Object,
      default: {},
    },
    height: {
      type: Number,
      default: 200,
    },
  },
  data() {
    return {
      dataArr: [],
      xData: [],
    };
  },
  mounted() {
    // console.log(this.comLimitdata, 9999);
  },
  created() {},
  methods: {
    getLimitdata(flage) {
      this.dataArr = [];
      this.xData = [];
      if (flage == "0" || flage == "2") {
        let yData;
        if (flage == "0") {
          this.xData = this.comLimitdata.subentryStatics.xData;
          yData = this.comLimitdata.subentryStatics.yData;
        } else if (flage == "2") {
          this.xData = this.comLimitdata.subentryWaterStatics.xData;
          yData = this.comLimitdata.subentryWaterStatics.yData;
        }
        if (yData.length > 0) {
          // 用电分项
          yData.map((item) => {
            let obj = {
              name: item.name,
              // color: colorConst.customColorarr,
              data: item.data,
              type: "line",
              smooth: true,
              lineStyle: {
                width: 2,
                // color: "#5B8FF9",
              },
              showSymbol: false,
              areaStyle: {
                opacity: 0.4,
                // color: "#5B8FF9",
              },
              // 高亮
              emphasis: {
                focus: "series",
              },
            };
            this.dataArr.push(obj);
          });
        } else {
          let obj = {
            name: "",
            data: [
              "0.00",
              "0.00",
              "0.00",
              "0.00",
              "0.00",
              "0.00",
              "0.00",
              "0.00",
              "0.00",
              "0.00",
              "0.00",
              "0.00",
              "0.00",
              "0.00",
              "0.00",
              "0.00",
              "0.00",
              "0.00",
              "0.00",
              "0.00",
              "0.00",
              "0.00",
              "0.00",
              "0.00",
            ],
            type: "line",
            smooth: true,
            lineStyle: {
              width: 2,
              // color: "#5B8FF9",
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.4,
              // color: "#5B8FF9",
            },
            // 高亮
            emphasis: {
              focus: "series",
            },
          };
          this.dataArr.push(obj);
        }
      } else {
        // 用电分区
        this.xData = this.comLimitdata.deptStatics.xData;
        let yData = this.comLimitdata.deptStatics.yData;
        if (yData.length > 0) {
          yData.map((item) => {
            let obj = {
              name: item.name,
              data: item.data,
              type: "line",
              smooth: true,
              lineStyle: {
                width: 2,
                // color: "#5B8FF9",
              },
              showSymbol: false,
              areaStyle: {
                opacity: 0.4,
                // color: "#5B8FF9",
              },
              // 高亮
              emphasis: {
                focus: "series",
              },
            };
            this.dataArr.push(obj);
          });
        } else {
          let obj = {
            name: "",
            data: [
              "0.00",
              "0.00",
              "0.00",
              "0.00",
              "0.00",
              "0.00",
              "0.00",
              "0.00",
              "0.00",
              "0.00",
              "0.00",
              "0.00",
              "0.00",
              "0.00",
              "0.00",
              "0.00",
              "0.00",
              "0.00",
              "0.00",
              "0.00",
              "0.00",
              "0.00",
              "0.00",
              "0.00",
            ],
            type: "line",
            smooth: true,
            lineStyle: {
              width: 2,
              // color: "#5B8FF9",
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.4,
              // color: "#5B8FF9",
            },
            // 高亮
            emphasis: {
              focus: "series",
            },
          };
          this.dataArr.push(obj);
        }
        // let color =["#5B8FF9","#5AD8A6","#5D7092","#F6BD16"]
      }
    },
  },
};
</script>

<style scoped lang="scss">
.limit {
  width: 100%;
  min-height: 230px;
  .limit-tabs {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
